<template>
  <div class="linkage">
    <el-form :inline="true" label-position="left" :model="ruleForm" :rules="rules" label-width="90px">
      <el-form-item :label="title" prop="province">
        <el-select v-model="selectProvince" size="small" @change="selectProvinceFun($event)"
          placeholder="请选择省份">
          <el-option value="" label="请选择省份"></el-option>
          <el-option :value="item" :label="item.label" v-for="(item, index) in city" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="city">
        <el-select v-model="selectCity" size="small" @change="selectCityFun($event)" placeholder="请选择城市">
          <el-option value="" label="请选择城市"></el-option>
          <el-option :value="item" :label="item.label" v-for="(item, index) in cityList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="area">
        <el-select v-model="selectArea" size="small" @change="selectAreaFun($event)" placeholder="请选择区县">
          <el-option value="" label="请选择区县"></el-option>
          <el-option :value="item" :label="item.label" v-for="(item, index) in areaList" :key="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import city from "@/assets/address.json";
export default {
  name: "linkage",
  data() {
    return {
      // 整个省市县数据
      city: city,
      // 被选中的市数据
      cityList: [],
      // 被选中的县数据
      areaList: [],
      selectProvince: {},
      selectCity: {},
      selectArea: {},
      ruleForm: {
        province: "",
        city: "",
        country: ""
      },
      rules: {
        province: [{ required: true, message: "请选择省份", trigger: "blur" }],
        city: [{ required: true, message: "请选择市", trigger: "blur" }],
        country: [{ required: true, message: "请选择区县", trigger: "blur" }]
      }
    };
  },
  props: {
    title: {
      default: "地址",
      type: String
    }
  },
  mounted() {},
  methods: {
    // 省份 市 县联动
    selectProvinceFun(event) {
      console.log(event);
      if (event) {
        this.cityList = event.children;
      } else {
        this.cityList = [];
      }
      this.areaList = [];
      this.$emit("getProvince", event.label);
    },
    selectCityFun(event) {
      console.log(event);
      if (event) {
        this.areaList = event.children;
      } else {
        this.areaList = [];
      }
      this.$emit("getCity", event.label);
    },
    selectAreaFun(event) {
      console.log(event);
      this.$emit("getArea", event.label);
    }
  }
};
</script>
<style lang="scss">
.linkage .el-select>.el-input {
  max-width: 160px;
}
</style>
